/*
 * @Author: ZhaoZhiqi
 * @Date: 2023-11-13 18:15:38
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-02-21 13:40:58
 * @Description: 
 * @FilePath: \labtalk-admin\src\components\Search\index.jsx
 */
import { Modal, Paper, Group, Button, SimpleGrid } from '@mantine/core';
import { IconSearch, IconUpload, IconTrash, IconPlus } from '@tabler/icons-react';
import { SearchItem } from './SearchItem/index';
import { SearchInput } from './SearchInput/index';
import { SearchSelect } from './SearchSelect/index';
import { useRef, useState } from 'react';
import { Dropzone } from '@mantine/dropzone';
import { notifications } from '@mantine/notifications';
import upload from '../../api/upload'
import { useDisclosure } from '@mantine/hooks';

export function Search({ query, create, uploadUrl, remove, selectedRows, customBtns, children }) {
    const openRef = useRef(null);
    const [uploading, setUploading] = useState(false)
    const [removeVisible, { open, close }] = useDisclosure(false);

    const onDrop = (files) => {
        const data = new FormData();
        data.append('file', files[0]);
        setUploading(true);
        upload(uploadUrl, data).then(res => {
            if (res.status === 200) {
                notifications.show({
                    title: '导入成功',
                    message: '导入文件成功！',
                    autoClose: 1500,
                    position: 'top-right',
                    color: 'green',
                });
            }
            setUploading(false);
            query();
        })
    }
    return (
        <Paper style={{ marginBottom: 20 }} shadow="md" radius="md" p="lg">
            <SimpleGrid cols={4} mb={children ? 20 : 0}>{children}</SimpleGrid>
            <Dropzone openRef={openRef} onDrop={onDrop}></Dropzone>
            <Group w={'100%'} justify="flex-start">
                <Group justify="flex-start">
                    {/* 查询 */}
                    <Button leftSection={<IconSearch size={16} />} onClick={() => query()}>查询</Button>
                    {/* 创建 */}
                    <Button variant="default" leftSection={<IconPlus size={16} />} onClick={() => create()}>创建</Button>
                    {/* 导入 */}
                    {uploadUrl ? <Button loading={uploading} loaderProps={{ type: 'dots', color: 'pale-blue' }} variant="default" leftSection={<IconUpload size={16} color={uploading ? 'var(--mantine-color-gray-4)' : 'var(--mantine-color-default-color)'} />} onClick={() => openRef.current?.()}>导入</Button> : null}
                    {/* 批量删除 */}
                    {remove && selectedRows ? <Button disabled={!selectedRows.length} loaderProps={{ type: 'dots', color: 'pale-blue' }} variant="default" leftSection={<IconTrash size={16} />} onClick={() => open()}>批量删除</Button> : null}
                </Group>
                
                {/* 自定义按钮 */}
                <Group justify="flex-start">
                    {customBtns}
                </Group>
            </Group>

            <Modal opened={removeVisible} onClose={close} centered title="" size={340}>
                <Group gap={10} justify='center'>
                    确认批量删除选中数据吗？
                </Group>
                <Group gap={10} style={{ width: '100%', marginTop: 30 }} justify='flex-end' wrap='nowrap'>
                    <Button w={'50%'} onClick={() => { remove(); close(); }}>删除</Button>
                    <Button w={'50%'} variant='default' onClick={close}>取消</Button>
                </Group>
            </Modal>
        </Paper>
    )
}

Search.Item = SearchItem
Search.Input = SearchInput
Search.Select = SearchSelect